<script setup>
import { ref } from 'vue'
import curd from "./curd/index.vue"

const options = ref(
    {
        actions: [ 
            // 自定义删除提示
            { name: 'del', text: '解绑', confirm: {
            message: '是否要解绑当前网关？，解绑后和该网关绑定的设备将移除',
            confirmButtonText: ''
        } }, 'add','refresh', 'filter', 'layout', 'fullScreen', 'pagination', 'searchbar'],
        column: [
            {
                'prop': 'machineNo',
                'label': '设备编号',
                'showOverflowTooltip': true
            },
            {
                'prop': 'machineName',
                'label': '设备名称',
                'showOverflowTooltip': true,
                'search': true
            },
            {
                'prop': 'sn',
                'label': 'sn',
                'showOverflowTooltip': true,
            },
            {
                'prop': 'latitude',
                'label': '地理纬度',
                'showOverflowTooltip': true,
                'elementuitype': 'number'
            },
            {
                'prop': 'longitude',
                'label': '地理经度',
                'showOverflowTooltip': true,
                'elementuitype': 'number'
            },
            {
                'prop': 'machineAddress',
                'label': '设备位置',
                'showOverflowTooltip': true,
                'type': null
            },

            {
                'prop': 'status',
                'label': '业务状态',
                'showOverflowTooltip': true,
                'elementuitype': 'number'
            },
            {
                'prop': 'description',
                'label': '设备描述',
                'showOverflowTooltip': true,
                'type': null
            },
            {
                'prop': 'createUser',
                'label': '创建人',
                'showOverflowTooltip': true
            },
            {
                'prop': 'createTime',
                'label': '创建时间',
                'showOverflowTooltip': true,
                'elementuitype': 'datetime'
            }
        ]
    }
)

//分页参数
const page = ref({
    total: 1000,
    currentPage: 1,
    pageSize: 10
})

//table数据
const tableData = ref([])

async function getListHandel(params) {
    let param = { ...params, ...{ current: page.value.currentPage, size: page.value.pageSize } }

    tableData.value =  [{
        "createUser":"1663745558951190529",
        "createTime":"2023-07-10 16:28:25",
        "updateUser":"1663745558951190529",
        "updateTime":"2023-07-10 16:28:25",
        "status":2,
        "isDeleted":0,
        "tenantId":"1673566991836028929",
        "id":"1678320252766650369",
        "sn":"2BC3FE86F3369E46728FA03492F78547D67D970591E5E916BA4F72639AF919E0359494C90E73018ECDD75773000ABA64",
        "machineName":"8号检测线",
        "machineNo":"7111627100060304006",
        "collectTable":"ch_7111627100060304006",
        "collectStatisticsTable":"ch_statistics_7111627100060304006",
        "ncTypeId":49,
        "collectPeriod":1000,
        "description":"",
        "machineAddress":"",
        "latitude":-1,
        "longitude":-1,
        "originalMachineNo":"",
        "createUserName":"iot管理员",
        "updateUserName":"iot管理员"
    }]
}

getListHandel()
const curdModel = ref(null)

function rowSave(res) {
    console.log(res)
}

function rowUpdate(res) {
    console.log(res)
}

function rowDel(row, done) {
    console.log(res)
}

function refreshChange(res, done) {
    getListHandel().then(_ => {
        //done数据完成后反馈给curd组件
        done()
    })
}

function searchChange(res, done) {
    page.value.currentPage = 1
    getListHandel(res).then(_ => {
        done()
    })

}


</script>

<template>
 <curd
    ref="curdModel"
    v-model:page="page"
    :data="tableData"
    :options="options"
    @row-save="rowSave"
    @row-update="rowUpdate"
    @row-del="rowDel"
    @refresh-change="refreshChange"
    @search-change="searchChange"
>
    <template #actions="scope">
        <el-button type="primary">详情</el-button>
    </template>
</curd>
</template>

<style scoped>
a {
  color: #42b983;
}
</style>
